<template>
  <div>
    <AlertView v-if="showAlert" alert-name="NTFM" />
    <el-empty
      v-if="!tableData || tableData.length == 0"
      :image-size="200"
      description="无数据"
    />
    <div v-else style="height: calc(100vh - 170px)">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table
            :data="tableData"
            :height="maxTableHeight"
            style="font-family: 'Consolas'; width: 100%"
            border
          >
            <el-table-column
              v-for="column in columns"
              :prop="column.key"
              :min-width="column.width"
              :align="column.align"
              :fixed="column.fixed"
            >
              <template #header>
                <div v-if="column.title.split('_').length == 1">
                  <span style="font-size: 14px">{{ column.title }}</span>
                </div>
                <div v-else>
                  <div style="font-size: 12px">
                    {{ column.title.split("_")[0] }}
                  </div>
                  <el-tag
                    size="small"
                    :type="
                      column.title.split('_')[1] == 'DEP'
                        ? 'success'
                        : 'warning'
                    "
                    >{{ column.title.split("_")[2] }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-table-v2
            :columns="columns"
            :data="tableData"
            :width="width"
            :height="height"
            fixed
          /> -->
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, h } from "vue";
import useCommonStore from "@/store/common.js";
import useFlowStore from "@/store/flow.js";
import dayjs from "dayjs";
// import headerRenderer from "./headerRenderer.vue";
import AlertView from "@/components/Alert/index.vue";

const flowStore = useFlowStore();
const commonStore = useCommonStore();
const maxTableHeight = computed(() => commonStore.clientHeight - 84);
const showAlert = computed(() => flowStore.isStoped);

const tableData = computed(() => {
  if (
    !flowStore.rawData ||
    flowStore.rawData == null ||
    flowStore.rawData.length == 0 ||
    !flowStore.tags
  )
    return [];
  let output = new Array();
  let timestamp = new Date(flowStore.begTime).getTime();
  let format = "MM/DD HH:mm";
  for (let i = 0; i < flowStore.rawData.length; i++) {
    output.push({
      moment: dayjs(timestamp).format(format),
      content: flowStore.rawData[i],
    });
    timestamp += 15 * 60 * 1000;
  }
  // console.log(tableData);
  return output;
});

const columns = computed(() => {
  if (
    !flowStore.rawData ||
    flowStore.rawData == null ||
    flowStore.rawData.length == 0 ||
    !flowStore.tags
  )
    return [];
  let output = new Array();
  output.push({
    key: "moment",
    dataKey: "moment",
    title: "MOMENT",
    width: 120,
    align: "center",
    fixed: true,
  });
  for (let i = 0; i < flowStore.tags.length; i++) {
    output.push({
      key: `content[${i}]`,
      dataKey: `content[${i}]`,
      title: flowStore.tags[i],
      width: 70,
      align: "center",
      fixed: false,
      // headerRenderer: headerRenderer,
    });
  }
  return output;
});
</script>
